<template>
  <div class="alarm-info-box" ref="wrapBox" @mouseover="stop" @mouseleave="start">
    <div class="alarm-info" ref="wraps">
      <div ref="content" style="display:flex;align-items:center;">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
let _Scroll = {};

export default {
  name: "scroll-announce",
  data() {
    return {
      scrollDistance: 0,
    };
  },
  methods: {
    restart() {
      this.scrollDistance = 0;
      this.start();
    },
    start() {
      let wraps = this.$refs.wraps;
      if (wraps) {
        wraps.style.visibility = "hidden";
      }

      _Scroll && clearInterval(_Scroll);
      _Scroll = setInterval(() => {
        let wraps = this.$refs.wraps;
        let scrollDiv = this.$refs.content;
        let wrapBox = this.$refs.wrapBox;
        if (wraps) {
          wraps.style.visibility = "visible";
          if (
            this.scrollDistance < -(scrollDiv.offsetWidth + wrapBox.offsetWidth)
          ) {
            this.scrollDistance = 0;
          }
          wraps.style.transform = "translateX(" + this.scrollDistance + "px)";
          this.scrollDistance -= 0.4;
        }
      }, 5);
    },
    stop() {
      _Scroll && clearInterval(_Scroll);
    },
  },
};
</script>

<style lang="less" scoped>
.alarm-info-box {
  width: 100%;
  overflow: hidden;
  cursor: default;
  .alarm-info {
    margin-left: 100%;
    white-space: nowrap;
    display: flex;
  }
}
</style>